<template>
  <Modal v-model="modalVisible" title="访问权详情" @on-cancel="modalManiCancel" width="1000">
    <div class="modal-card">
      <h4 class="zl-title">访问权详情</h4>
      <div class="modal-item">
        <Row :gutter="10">
          <Col :span="12">名称：{{modalForm.id}}</Col>
          <Col :span="12">主机：{{modalForm.host}}</Col>
          <Col :span="12">环境：{{modalForm.environmentName}}</Col>
          <Col :span="12">创建时间：{{modalForm.creationTimestamp}}</Col>
        </Row>
      </div>
      <h4 class="zl-title">路径列表</h4>
      <Table :columns="columns" :data="modalForm.paths"></Table>

    </div>
    <div slot="footer">
      <Button type="primary" @click="modalManiConf">确定</Button>
    </div>
  </Modal>
</template>
<script type="text/javascript">
// import Fetch from '@/api/request'
export default {
  data() {
    return {
      modalForm: {
      },
      modalVisible: false,
      columns: [
        {
          type: 'index',
          width: 60
        }, {
          title: '路径',
          key: 'path'
        }, {
          title: '域名',
          key: 'serviceId'
        }, {
          title: '端口',
          key: 'servicePort'
        }
      ]
    }
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    form: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  mounted() {
  },
  methods: {
    // 确定操作
    modalManiConf() {
      this.$emit('update:visible', false)
    },
    // 取消操作
    modalManiCancel() {
      this.$emit('update:visible', false)
    }
  },
  watch: {
    visible(val) {
      this.modalVisible = val
      if (val) {
        this.modalForm = Object.assign({}, this.form)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.modal-card {
  padding: 10px 20px;
  font-size: 14px;
  .zl-title {
    margin-top: 10px;
  }
  .modal-item {
    padding-left: 15px;
  }
  .ivu-col {
    padding-bottom: 8px;
    padding-top: 6px;
  }
}
</style>
